<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--  引入vue.js-->
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <select v-model="proIdx">
            <option value="-1">--请选择--</option>
            <option value="0">江西省</option>
            <option value="1">浙江省</option>
            <option value="2">台湾省</option>
        </select>

        <select>
            <option value="-1">--请选择--</option>
            <option v-for="cityName in cities">{{cityName}}</option>
        </select>
    </div>
</body>

<script>

    let provinces = [
        ["南昌市","九江市","庐山市"],
        ["杭州市","宁波市","温州市","湖州市"],
        ["台北市","高雄市","莲花市","台中市","台南市"]
    ];

    new Vue({
        el:"#app",
        //定义数据模型
        data:{
            proIdx:"-1",
            cities:[]
        },
        //定义vue对象的行为
        methods:{

        },
        //监听机制，监听指定属性的变化（一旦属性发生值的改变，我们实现写好的监听回调方法会执行）
        watch:{
            //newVal 变化后的新值，oldVal 变化前的原值
            proIdx:function (newVal,oldVal){
                //alert(newVal + "===" + oldVal)
                this.cities = provinces[newVal];
            }
        }
    });

</script>

</html>